<template>
	<view class="main">
		<view class="bacolor">
			<u-navbar title="我的订单" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
				:bgColor="state.bgColor">
			</u-navbar>
			<!-- <u-navbar title="我的订单" :autoBack="true" :height="40" 
				:bgColor="state.bgColor" :leftIconColor="state.leftIconColor">
			</u-navbar> -->
			<view class="center">
				<view class="lieones" @click="sheep.$router.go('/pages/index/detail?id='+state.infor.fabu_id+'&type=1')">
					<view class="tuDing">
						<view class="imges">
							<image :src="state.infor.show_image" mode=""></image>
						</view>
						<view class="rights">
							<view class="tites">
								{{state.infor.title}}
							</view>
							<view class="titemo">
								<text>￥{{state.infor.amount}}</text>
								<text class="tui" v-if="state.infor.status == '4'">退款成功</text>
							</view>
						</view>
					</view>
					
				</view>
				<view class="lieones">
				
						<view class="ding">
							<text class="ten">订单编号</text><text>{{state.infor.number}}</text>
						</view>
						<view class="ding">
							<text class="ten">创建时间</text><text>{{setTime(state.infor.createtime)}}</text>
						</view>
						<view class="ding" v-if="state.infor.status=='1'||state.infor.status=='2'">
							<text class="ten">付款时间</text><text>{{setTime(state.infor.paytime_text)}}</text>
						</view>
						<view class="ding" v-if="state.infor.status=='2'">
							<text class="ten">签到时间</text><text>{{state.infor.confirmtime_text}}</text>
						</view>
						<view class="ding"  v-if="state.infor.status=='3'">
							<text class="ten">取消时间</text><text>{{state.infor.cancellationtime_text}}</text>
						</view>
				</view>
			</view>
		</view>
		<view  class="buttons" >
			<view class="xiuGai" v-if="state.infor.status_text=='待付款' && state.orderId==2" @click="showPrice">
				修改价格
			</view>
			<view class="quXiao" v-if="state.infor.status_text=='待付款' && state.orderId==1"  @click="sOrder(index,'cancellation')" >
				取消订单
			</view>
			<view class="xiuGai" v-if="state.infor.status_text=='待付款' && state.orderId==1"  @click="zhifu">
				立即支付
			</view>
			<view class="xiuGai" v-if="state.infor.status_text=='待签收' && state.orderId==1"  @click="sOrder(index,'confirm')">
				立即签收
			</view>
			<view class="tui" v-if="state.infor.status_text=='待签收' && state.orderId==1" @click="sOrder(index,'refund')">
				退款
			</view>
			<view class="xiuGai" v-if="state.infor.status_text=='已完成' && state.orderId==1"  @click="sOrder(index,'confirm')">
				立即签收 
			</view>
			<view class="xiuGai" v-if="state.status_text=='待签收' && state.orderId==2"  @click="getQian(index)">
			    提醒签收
			</view>
		</view>
		<!-- <view  class="buttons">
			<view class="xiuGai">
				立即支付
			</view>
		</view> -->
		<!-- <viewclass="buttons">
			<view class="xiuGai">
				取消订单
			</view>
		</view>
		<view   class="buttons">
			<view class="xiuGai">
				签收
			</view>
		</view>
		<view  class="buttons">
			<view class="xiuGai">
				签收
			</view>
		</view>
		 -->
		<u-popup :show="state.showPrice" mode="bottom"  @close="close">
			<view class="priceBox">
				<view class="input">
					<input type="number" placeholder="请输入修改的价格" v-model="state.amount"/>
				</view>
				<view class="isPrice" @click="setPrice">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {reactive} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	const state = reactive({
		titleStyle: 'fontWeight:bold',
		leftIconColor:'#fff',
		bgColor:'rgba(0,0,0,0)',
		id:"",
		infor:{},
		showPrice:false,
		amount:'',
		istuan:'',
		orderId:'',//1是我的订单 2是团长订单
	})
	onLoad((options)=>{
		state.orderId = options.orderId
		state.id = options.id
		// getUserinfo()
		getOrderInfo()
	})
	
	async function getUserinfo(){
		const {code,data} = await sheep.$api.user.userInfo({
			token:uni.getStorageSync('token'),
		})
		if(code=='1'){
			state.istuan = data.auth_type
		}
	}
	function showPrice(e){
		state.showPrice=true
	}
	
	// 提醒签收
	async function getQian(index){
		let userId=state.infor.user_id
		let fabu_id=state.infor.fabu_id
		let channel=state.infor.channel
		const {code,data} = await sheep.$api.zqzApi.addCon({
			token:uni.getStorageSync('token'),
			content:'如订单无误请您确认签收',
			receive_user_id:userId,
			type:'send',
			channel:channel,
			is_chat:'1',
			fabu_id:fabu_id,
		})
		if(code=='1'){
			uni.showToast({
			  title:"发送成功",
			  icon: "none",
			  duration: 1000,
			})
		}
	}
	async function sOrder(index,type){
		if(type=='cancellation'){
			uni.showModal({
				title: '确认取消订单',
				content: '你确定要取消订单吗？',
				success(e) {
					if(e.confirm){
						setorder(index,type)
					}
				}
			})
		}
		if(type=='refund'){
			uni.showModal({
				title: '确认退款订单',
				content: '你确定要退款订单吗？',
				success(e) {
					if(e.confirm){
						setorder(index,type)
					}
				}
			})
		}
		if(type=='confirm'){
			uni.showModal({
				title: '确认签收订单',
				content: '你确定要签收订单吗？',
				success(e) {
					if(e.confirm){
						setorder(index,type)
					}
				}
			})
		}
		
	}
	async function setorder(index,type){
		let id = state.id
		const {code,data,msg} = await sheep.$api.zqzApi.setOrder({
			token:uni.getStorageSync('token'),
			id:id,
			do_type:type,
		})
		if(code=='1'){
			getOrderInfo()
		}else{
			uni.showToast({
			  title: msg,
			  icon: "none",
			  duration: 1000,
			})
		}
		
	}
	//支付
	async function zhifu(){
		let id = state.id
		let payType=state.infor.pay_type_text
		let pay_type = ''
		let method =''
		let codes=''
		let port = uni.getSystemInfoSync().uniPlatform 
		console.log(port,'ssss')
		if(port=='windows'){
			method = 'web'
		}
		if(port=='devtools'){
			method = 'miniapp'
		}
		if(port=='mp-weixin'){
			method = 'miniapp'
		}
		if(port=='app'||port=='android'||port=='ios'){
			method = 'app'
		}
		if(payType=='微信'){
			pay_type = 'wechat'
		}else{
			pay_type = 'alipay'
		}
		console.log('codescodescodescodes’')
		if(port=='devtools'||port=='mp-weixin'){
			console.log('codescodescodescodes’')
			// 微信小程序支付
			uni.login({
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function(event){
					codes = event.code
					console.log(event.code,'codes’')
					getWei(pay_type,method,codes,id)
				},
				fail: function (err) {
			        // 登录授权失败  
			        // err.code是错误码
			    }
			})
			
		}else{
			const {code,data,msg} = await sheep.$api.zqzApi.setOrder({
				token:uni.getStorageSync('token'),
				id:id,
				do_type:'payment',
				pay_type:pay_type,
				method:method,
			})
			if(code=='1'){
				getOrderInfo()
			}else{
				uni.showToast({
				  title: msg,
				  icon: "none",
				  duration: 1000,
				})
			}
		}
		
	}
	//微信小程序支付
	async function getWei(pay_type,method,codes,id){
		const {code,data,msg} = await sheep.$api.zqzApi.setOrder({
			token:uni.getStorageSync('token'),
			id:id,
			do_type:'payment',
			pay_type:pay_type,
			method:method,
			code:codes
		})
		if (code == 1) {
			let orderInfo=data
		    uni.requestPayment({
		       provider: 'wxpay',    //支付类型-固定值
		       timeStamp:orderInfo.timeStamp, // 时间戳（单位：秒）
		       nonceStr: orderInfo.nonceStr, // 随机字符串
		       package: orderInfo.package, // 固定值
		       signType:orderInfo.signType, //固定值
		       paySign:orderInfo.paySign, //签名
		       success: function (res) {
		           console.log('success:' + JSON.stringify(res));
		           console.log("支付成功");
		       },
		       fail: function (err) {
		           console.log('fail:' + JSON.stringify(err));
		           console.log("支付失败");
		       }
		   });
		}
	}
	async function setPrice(){
		let id = state.id
		const {code,data,msg} = await sheep.$api.zqzApi.setOrder({
			token:uni.getStorageSync('token'),
			id:id,
			do_type:'edit',
			amount:state.amount,
		})
		if(code==1){
			state.showPrice=false
			state.list[state.index].amount=state.amount
		}else{
			uni.showToast({
			  title: msg,
			  icon: "none",
			  duration: 1000,
			})
		}
		
	}
	async function getOrderInfo(){
		const {code,data} = await sheep.$api.zqzApi.orderInfo({id:state.id})
		console.log(data,'--data--')
		if(code=='1'){
			state.infor=data
		}
	}
	function getNav(id){
		state.navid=id
	}
	// 转时间格式
	function setTime(time){
		let data = new Date(time)
		let nian = data.getFullYear()
		let yue = (data.getMonth()+1).toString().padStart(2,'0')
		let ri = data.getDate().toString().padStart(2,'0')
		let shi = data.getHours().toString().padStart(2,'0')
		let fen = data.getMinutes().toString().padStart(2,'0')
		let miao = data.getSeconds().toString().padStart(2,'0')
		var formattedDateTime = nian + '-' + yue + '-' + ri + ' ' + shi + ':' + fen + ':' + miao;
		return formattedDateTime
	}
</script>

<style lang="scss">
	.buttons{
		width: calc(100% - 48rpx);
		padding:24rpx;
		position: fixed;
		bottom:0;
		left:0;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content:flex-end;
		.xiuGai{
			width:152rpx;
			line-height:60rpx;
			text-align: center;
			border-radius:32rpx;
			opacity: 1;
			color: #1BDDD0;
			border: 1px solid #1BDDD0;
			margin-left:10rpx;
		}
		.quXiao{
			width:152rpx;
			line-height:60rpx;
			text-align: center;
			border-radius:32rpx;
			opacity: 1;
			color: #999;
			border: 1px solid #999;
			margin-left:10rpx;
		}
		
	}
	.center{
		width: calc(100% - 64rpx);
		margin: 20rpx auto 0;
		.lieones{
			width:calc(100% - 48rpx);
			padding:24rpx;
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			.ding{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 50rpx;
				.ten{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-right: 20rpx;
				}
			}
			.topen{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content:space-between;
				font-size:28rpx;
				margin:20rpx auto;
				.hao{
					
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.types{
					color: #1BDDD0;
				}
				.wancheng{
					color: #999999;
				}
			}
			.tuDing{
				display: flex;
				// align-items: center;
				.imges{
					width: 100rpx;
					margin-right: 20rpx;
					image{
						width: 100rpx;
						height:100rpx;
						border-radius: 12rpx;
					}
				}
				.rights{
					width: 80%;
				}
				.tites{
					font-size:28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					
				}
				.titemo{
					font-weight: bold;
					font-size: 32rpx;
					margin-top:20rpx;
					display: flex;
					align-items: center;
					justify-content:space-between;
					.tui{
						font-size: 28rpx;
						color:#1BDDD0; 
						font-weight:100;
						
					}
				}
			}
			.orderDing{
				display: flex;
				justify-content:flex-end;
				.xiuJia{
					width:152rpx;
					line-height:60rpx;
					text-align: center;
					border-radius:32rpx;
					opacity: 1;
					color: #1BDDD0;
					border: 1px solid #1BDDD0;
				}
				.quXiao{
					width:152rpx;
					line-height:60rpx;
					text-align: center;
					border-radius:32rpx;
					opacity: 1;
					color: #999999;
					border: 1px solid #DBDBDB;
				}
				.tui{
					width:152rpx;
					line-height:60rpx;
					text-align: center;
					border-radius:32rpx;
					opacity: 1;
					color: #1BDDD0;
					// border: 1px solid #1BDDD0;
				}
			}
			
		}
	}
    page {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;
		.main {
			height: 100vh;
			width: 100%;
			background-color: #F5F5F5;
			.bacolor{
				width: 100%;
				height:400rpx;
				background: linear-gradient(180deg, rgba(27,221,208,0.15) 0%, rgba(27,221,208,0) 100%);
				.uni-page-head{
					background: rgba(0,0,0,0)!important;
					color: #fff!important;
					
					
				}
				// :deep(.u-navbar__content__title){
				// 	color: #fff!important;
				// }
			}
		}
		
    }
	.main {
		height: 100vh;
		width: 100%;
		background-color: #F5F5F5;
	}
</style>
